import  TChip  from 't/basic/chip';
import { defineComponent, inject, onMounted, ref, toRefs } from 'vue';
import { useQuasar } from '@teld/q-components';
export default defineComponent({
  name: 'SelectHelperHistoryRender',
  components: {
    TChip,
  },
  props: {
    labelField: String,
    helperCode: String,
    filter:String,
    fromFilter:Boolean
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const { labelField, helperCode,filter,fromFilter } = toRefs(props);
    const $q = useQuasar();
    onMounted(() => {});
    function onClickHandler(params) {}
    // let helperCode = helperCode.value;
    let key = 'select_helper_generate_code';
    let helperCode_auto = inject('helperCode_auto')
    let historyList = localStorage.getItem(`${key}_${helperCode.value || helperCode_auto}`);
    if (historyList) {
      historyList = ref(JSON.parse(historyList));
    }

    return () => {
      if (historyList && historyList.value&&historyList.value.length>0) {
        return (
          <div class='select_helper_history tr-chips-size-small tr-chips-color-grey'>
            <div style={  $q.screen.xs||$q.platform.is.mobile? 'max-height: 68px;overflow-y: auto;display:flex;gap:8px;flex-wrap:wrap' :'display:flex;gap:8px;flex-wrap:wrap'}>
            {(() => {
              let Teplate = [];
              historyList.value.forEach((element, index) => {
                if (!element[labelField.value]) return
                  Teplate.push(
                    <t-chip
                      removable
                      class='select_helper_history_content'
      
                      onRemove={e => {
                        historyList.value.splice(index, 1);
                        localStorage.setItem(
                          `${key}_${helperCode.value || helperCode_auto}`,
                          JSON.stringify(historyList.value),
                        );
                      }}
                      clickable
                      onClick={() => {
                        if (element) {
                          emit('clickByTag', element);
                        }
                      }}
                      title={element[labelField.value]}
                    >
                      {element[labelField.value]}
                    </t-chip>,
                  );
              });
              return Teplate;
            })()}
            </div>
            {(()=>{
              if(!filter.value&&($q.screen.xs||$q.platform.is.mobile)&&fromFilter.value){
                return    <span onClick={()=>{
                  Funcs.Confirm(
                    '提示',
                   '确定要清除历史结果吗？',
                    
                    ()=>{
                      historyList.value = [];
                      localStorage.setItem(
                        `${key}_${helperCode.value || helperCode_auto}`,
                        JSON.stringify(historyList.value),
                      );
                    } ,
                    ()=>{},
                    null,
                    {
                      type:'warning',
                      confirmButtonText:'清空',
                      cancelButtonText:"取消"                
                    }
                  )
                  // historyList.value = [];
                  // localStorage.setItem(
                  //   `${key}_${helperCode.value || helperCode_auto}`,
                  //   JSON.stringify(historyList.value),
                  // );
                }} style={'font-size:14px;color:rgba(0,0,0,.32);    text-decoration: underline;display:inline-block;width:100%;text-align:center;margin-top:8px'}>清除历史结果</span>
              }
            })()}
         
          </div>
        );
      } else {
        return <span style={'display:none'}></span>;
      }
    };
  },
});
